<template>
  <div class="login">
      <div class="login_box">
          <!--头像区域-->
          <div class="avatar_box">
              <img src="../assets/logo.png" alt=""/>
          </div>
          <!--登录表单区域 model绑定数据  rules规则验证 ref实例对象用于重置-->
          <el-form ref="loginFromRef" :model="loginFrom" :rules="loginRules" label-width="0px" class="login_form">
            <!--用户名 验证是加在上面的prop中的-->
            <el-form-item prop="username">
                <!--iconfont 图标的基类-->
                <el-input v-model="loginFrom.username" prefix-icon="iconfont icon-denglu"></el-input>
            </el-form-item>
            <!--密码-->
            <el-form-item prop="password">
                <el-input v-model="loginFrom.password" type="password" prefix-icon="iconfont icon-tianchongxing-"></el-input>
            </el-form-item>
            <!--验证码-->
            <el-form-item prop="verifyCode">
              <div class="v_box">
                <el-input class="v_input" v-model="loginFrom.verifyCode" prefix-icon="el-icon-mobile"></el-input>
                <img class="v_img" :src="captcha"/>
              </div>
            </el-form-item>
            <!--记住我-->
            <!--
            <el-form-item>
              <el-radio v-model="loginFrom.rememberMe" label="true">记住我</el-radio>
            </el-form-item>
            -->
            <!--按钮区域-->
            <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      captcha: null,
      // 为from绑定模型数据
      loginFrom: {
        username: '',
        password: '',
        verifyCode: '',
        rememberMe: ''
      },
      // 这是表单的验证规则
      loginRules: {
        // 验证用户名、密码是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getCaptcha()
  },
  methods: {
    // 点击重置按钮 重置登录表单
    resetLoginForm () {
      this.$refs.loginFromRef.resetFields()
    },
    async getCaptcha () {
      const { data: res } = await this.$http.get('/vueShop/captcha')
      if (!res.status) return this.$message.error('获取验证码失败')
      this.captcha = res.data.image
    },
    // 点击登录 预验证
    login () {
      this.$refs.loginFromRef.validate(async valid => {
        // eslint-disable-next-line no-useless-return
        if (!valid) return
        // 返回对象 Promise 简化 加await 同时方法 async
        /*
        const res = await this.$http.post('/login', this.loginFrom)
        console.log(res)
        if (!res.data.status) return this.$message.error(res.data.msg)
        this.$message.success(res.data.msg)
        // 将登录成功后的 token，保存到sessionStorage中 项目中除了登录接口 其它接口都需登录后才能访问 token只应在网站打开期间生效
        window.sessionStorage.setItem('token', res.data.token)
        // 跳转后台主页 /main
        await this.$router.push('/main')
         */
        await this.$http({
          method: 'post',
          // url: 'login',
          // data: this.loginFrom,
          url: '/vueShop/oauth/token?grant_type=password&scope=all&client_id=admin&client_secret=990716&username=' +
            this.loginFrom.username + '&password=' + this.loginFrom.password + '&verifyCode=' + this.loginFrom.verifyCode +
            '&rememberMe=' + this.loginFrom.rememberMe,
          /*
          data: {
            grant_type: 'password',
            scope: 'all',
            username: this.loginFrom.username,
            password: this.loginFrom.password
          },
          */
          headers: {
            'Content-type': 'application/x-www-form-urlencoded'
            // 'Content-type': 'multipart/form-data'
            // Authorization: 'Basic YWRtaW46OTkwNzE2'
          }
        }).then((res) => {
          if (!res.data.status) return this.$message.error(res.data.msg)
          this.$message.success(res.data.msg)
          // 将登录成功后的 token，保存到sessionStorage中 项目中除了登录接口 其它接口都需登录后才能访问 token只应在网站打开期间生效
          window.sessionStorage.setItem('token', 'Bearer ' + res.data.access_token)
          // 跳转后台主页 /main
          this.$router.push('/main')
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.login{
    background-color: aquamarine;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_box{
    width: 450px;
    height: 400px;
    background-color: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    // less 内嵌
    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        // overflow: hidden;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        margin-top: -70px;
        background-color: #fff;
        img{
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}
.login_form{
    width: 90%;
    .v_box{
      display: flex;
      .v_img{
        height: 40px;
      }
    }
    .btns{
        display: flex;
        justify-content: flex-end;
    }
}

</style>
